<template>
  <div class="mainPage">
    <div class="mainPage_top">
      <div>
        <el-button type="success" size="medium" style="margin-bottom: 0.1rem" @click="modal = true">上传模板</el-button>
      </div>
      
    </div>
    <Table class="table" style="width: 100%  !important;" highlight-row :columns="columns" :data="tableData">
    </Table>
    <Modal v-model="modal" title="上传模板" @on-ok="ok" width="768" ok-text="上传提交" @on-cancel="cancel">
      <el-form :model="subjectName" :rules="rules" ref="ruleForm">
      

        <el-form-item label="是否启用:" :label-width="formLabelWidth">
          <template>
            <el-radio v-model="subjectName.states" :label="0">启用</el-radio>
            <el-radio v-model="subjectName.states" :label="1">禁用</el-radio>
          </template>

          <el-form-item label="请输入权重:" :label-width="formLabelWidth"  style="display: flex;">
            <el-input placeholder="请输入权重" v-model="subjectName.input" clearable>
            </el-input>
          </el-form-item>

        </el-form-item>
        <el-form-item label="人脸照片:" :label-width="formLabelWidth">
          <vue-uploadimg :key="ind" :imgUrl="imgurl1" url="chongqing/stage/file/uploadFile" :clear="clear"
            @uploadImg="uploadImg1"></vue-uploadimg>
        </el-form-item>

      </el-form>
    </Modal>
  </div>
  
</template>
<script>
import axios from 'axios'
export default {
  data() {
    return {
      pagId: "",
      tableData: [],
      downloadUrl: "",
      fileList: [],
      // value: "全部模板类型",
      // options: [{
      //   value: '0',
      //   label: '全部模板类型'
      // }, {
      //   value: '1',
      //   label: '团队预约模板'
      // }, {
      //   value: '2',
      //   label: '安全承诺书'
      // }],
      modal: false,
      imgurl1: "",
      subjectName: {
        input: "",
        region: '',
        states: '',
        id: 0,
        name: ''
      },
      columns: [{
        title: "是否可用",
        align: "center",
        width: 200,
        render: (h, params) => {
          let color = "";
          let content = "";
          if (params.row.states === 0) {
            color = "green";
            content = "启用";
          }
          if (params.row.states === 1) {
            color = "red";
            content = "禁用";
          }
          return h(
            "Tag", {
            props: {
              color: color
            },
          },
            content
          );
        },
      },
      {
        title: 'banner图片',
        key: 'imageUrl',
        align: 'center',
        width: 150,
        render: (h, params) => {
          return h('img', {
            style: {
              width: '80px',
              display: 'block',
              // marginLeft: "25%",
              marginTop: '10px',
              marginBottom: '10px'
            },
            attrs: {
              src: params.row.imageUrl
            }
          })
        }
      },
      {
        title: "排序",
        key: "weights",
        align: "center",

      },


      {
        title: '操作',
        align: 'center',
        width: '350px',
        // fixed: 'right',
        render: (h, params) => {
          return h('div', [
            h(
              'Button', {
              props: {
                type: 'primary',
                disabled: params.row.states === 0
              },
              style: {
                'margin-left': '10px'
              },
              on: {
                click: () => {
                  this.getUpdate(params,0)
                }
              }
            },
              '启用'
            ),
            h(
              'Button', {
              props: {
                type: 'error',
                disabled: params.row.states === 1
              },
              style: {
                'margin-left': '10px'
              },
              on: {
                click: () => {
                  this.getUpdate(params,1)

                  // this.look(params)
                }
              }
            },
              '禁用'
            ),
            h(
              'Button', {
              props: {
                type: 'info'
              },
              style: {
                'margin-left': '10px'
              },
              on: {
                click: () => {
                  // this.sortinput()
                  this.bianji(params)
                }
              }
            },
              '编辑'
            ),
            h(
              'Button', {
              props: {
                type: 'error'
              },
              style: {
                'margin-left': '10px'
              },
              on: {
                click: () => {
                  // this.del(params),
                 
                  this.open(params)
                }
              },
             
            },
              '删除'
            ),
          ])
        }
      }
      ],
      type: {
        1: ['xls', 'xlsx'],
        2: ['pdf', 'doc', 'docx', "jpg", "png", "jpeg"]
      },
      headers: {
        token: localStorage.getItem("token")
      }
    }
  },
  created() {
    //进来就请求列表
   this.upList()
   this.sortinput()
   this.getUpdate()
  },

  methods: {
   

    uploadImg1(file) {
      console.log(file);
      this.imgurl1 = file
    },
   
    //点击修改
    bianji(params) {
      this.modal = true;
      //对象解构
      const {
        imageUrl,
        id,
        // name,
        states,
        weights
      } = params.row
      // this.subjectName.region = templateType,
        this.subjectName.states = states,
        this.subjectName.input = weights,
        this.subjectName.id = id
      this.imgurl1 = imageUrl
      this.pagId = id
      const data = [{
        // name,
        url: imageUrl
      }]
      this.fileList = data
    },



    // 点击删除弹框
     open(params) {
      // console.log(params);
      let that=this
        this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          that.del(params)
          this.$message({
            type: 'success',
            message: '删除成功!'

          }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });          
        });;
        })
      },


    //启用   禁用按钮
    getUpdate(params, states) {
      this.$http("/chongqing/stage/banner/enableOrDisable", {
        //该行的id
        id:params.row.id,
        //状态
        states
      }, "post", (res) => {
        console.log('2',res);
        var xstates = JSON.parse(res.config.data)
        console.log(xstates.states);
        // console.log( );
        params.row.states =xstates.states
        //刷新列表
        // this.upList()
      })
    },



    //选项框改变  全部模块类型  团队预约模块  安全承诺书模块  的select 下拉框改变
    onTypeChange(e) {
      this.upList(e)
    },


    //获取列表  获取页面列表
    upList() {
      this.$http("/chongqing/stage/banner/getAllBanner", {

      }, "GET", (res) => {
        //复制给表头  动态赋值给表头  
       this.tableData =  res.data.data.sort(function(a,b){
        return b.weights-a.weights
      });
      })
    },


    //删除
    del(params) {
      this.$http("/chongqing/stage/banner/deleteBanner", {
        id: params.row.id
      }, "get", (res) => {
        console.log(res);
        if(res.data.code == 1000){
          this.upList()
        }
      })
    },


    //上传模板的点击提交的按钮的成功回调
    ok() {
      console.log(this.imageUrl);
      console.log(this.subjectName.input);
      this.$http("/chongqing/stage/banner/editBanner", {
        imageUrl: this.imgurl1,
        id: this.pagId,
        name: this.subjectName.name,
        states: this.subjectName.states,
        weights:  this.subjectName.input
      }, 'post', (res) => {
        console.log(res);
        //上传成功要清除弹出框的内容的值  下边写了一个方法
        this.reset()
       
        //上传成功之后再去请求列表接口
        this.upList()
        this.sortinput()
       
      })
    },



    //取消的回调
    cancel() {
      this.reset()
    },
    //清空弹出框中的数据
    reset() {
      this.imgurl1 = "",
        this.fileSize = "",
        this.id = 0,
        this.subjectName.name = "",
        this.subjectName.states = 1,
        this.subjectName.region = "",
        this.fileList = [],
        this.subjectName.input=""
    }
  }
}

</script>
<style>
</style>
